<template>
  <div class="app">
    <h3>你好！</h3>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <school :getSchoolName="getSchoolName"></school>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 第一种写法使用v-on或者@ -->
    <!-- <student @getStudentName="getStudentName"></student> -->
    <!-- <student v-on:getStudentName="getStudentName"></student> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 第二种写法使用ref  更灵活-->
    <student ref="student"></student>
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    School,
    Student,
  },
  methods: {
    getSchoolName(name) {
      console.log("获取学校名称：", name);
    },
    getStudentName(name) {
      console.log("获取学生姓名：", name);
    },
    demo(name) {
      console.log("demo   获取学生姓名：", name);
    },
  },
  mounted() {
    this.$refs.student.$on("getStudentName", this.getStudentName); // 给ref是student的vc上绑定自定义事件
    this.$refs.student.$on("demo", this.demo); // 给ref是student的vc上绑定自定义事件
    // this.$refs.student.$once("getStudentName", this.getStudentName); // 给ref是student的vc上绑定自定义事件（once一次性）
  },
};
</script>

<style>
.app {
  background-color: #ddd;
  padding: 10px;
}
</style>